/**
 * Created by heshufen on 20/6/21.
 */
import React, {Component} from 'react';
import {Image, StyleSheet} from 'react-native';
import HomeScreen from './screens/home/HomeScreen';
import DynamicTabScreen from './screens/dynamic/DynamicTabScreen';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default class TabScreen extends Component {
    render() {
        return (
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({focused, color, size}) => {
                        // alert(JSON.stringify({focused, color, size}));
                        let iconImage;

                        if (route.name === '首页') {
                            iconImage = focused ? require('./assets/tab/tab_home_on.png') : require('./assets/tab/tab_home.png');
                        } else if (route.name === '动态') {
                            iconImage = focused ? require('./assets/tab/tab_home_on.png') : require('./assets/tab/tab_home.png');
                        }
                        // You can return any component that you like here!
                        return <Image style={styles.icon}
                                      source={iconImage}/>;
                        /*return (<View>
                            <Image style={styles.icon}
                                   source={iconImage}/>
                                   <View style={{width: 15,height: 15,backgroundColor: '#fff000',position:'absolute'}}/>
                        </View>);*/
                    },
                })}
                tabBarOptions={{
                    activeTintColor: '#000',
                    inactiveTintColor: '#ff7520',
                    // labelStyle:{backgroundColor: '#fff000',fontSize: 14,marginTop:10}
                    // tabStyle:{backgroundColor: '#000'}
                    // activeBackgroundColor:'#000',
                    // inactiveBackgroundColor:'#fff000'
                }}>
                <Tab.Screen name="首页" component={HomeScreen}/>
                <Tab.Screen name="动态" component={DynamicTabScreen}/>
            </Tab.Navigator>
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});
